<template>
    <div class="cell-container clearFix"
        @click="toPath()"
        :class="{'work-shower-light': !$store.state.isDarkMode, 'work-shower-dark': $store.state.isDarkMode}"
    >
        <!-- 标题左浮动 -->
        <div class="leftFix">{{ title }}</div>
        <!-- 内容右浮动 -->
        <div class="rightFix">
            <!-- 默认插槽 默认值为 使用者传入的content -->
            <slot>{{ content }}</slot>
        </div>
    </div>
</template>

<script>
import router from '@/router'

export default {
    name: 'BpCell',
    props:['title', 'content', 'to'],
    methods:{
        /* 点击路由跳转 */
        toPath(){
            if(!this.to)
                return

            router.push(this.to)
        }
    }
}
</script>

<style scoped>
.cell-container {
    height: 1em;
    padding: 15px;
    border-bottom: 1px solid rgba(138, 138, 138, 0.2);
}
.cell-container:active {
    background-color: rgba(119, 119, 119, 0.3);
}
</style>